<template>
    <div class="my-tree">
        <ul>
            <li v-for="item,index in treeList" :key="index">
               <div @click="openChildren(item)">
                    <span>{{item.open?'-':'+'}}</span>
                    <span>{{item.title}}</span>
               </div>
               <!-- 使用递归组件 -->
               <div v-show="item.open">
                   <treeMenu :treeList="item.children"></treeMenu>
               </div>
            </li>
        </ul>
    </div>
</template>
<script>
export default {
    name:'treeMenu',//必须有的属性
    props:{
        treeList:{
            type:Array,
            default:()=>[]
        }
    },
    data() {
        return {
            
        }
    },
    methods: {
        openChildren(item){
          item.open = !item.open
        }
    },
}
</script>